/* * @Description: * @Author:lxy * @Date:2023-03-23 10:23 */
<template>
  <!-- 底部模块 -->
  <div class="fotterPage">
    <div class="ul-box">
      <ul>
        <li v-for="(item, index) in dataAll" :key="index" @click="$event=>clickHandler(item.name)" style="cursor: pointer;">
          <div class="li-content">
            <p>
              <span>{{ item.name }}</span>
            </p>
            <p><span>226933</span></p>
            <div class="li-box">
              <div class="box1">
                <h5>
                  <span>{{ item.spanTile1 }}</span>
                </h5>
                <div class="pic">
                  <img src="./images/wc.png" />
                  <span>{{ item.titleValue1 }}</span>
                </div>
              </div>
              <div class="box2">
                <h5>
                  <span>{{ item.spanTile2 }}</span>
                </h5>
                <div class="pic">
                  <img src="./images/zc.png" />
                  <span>{{ item.titleValue2 }}</span>
                </div>
              </div>
              <div class="box3">
                <h5>
                  <span>{{ item.spanTile3 }}</span>
                </h5>
                <div class="pic">
                  <img src="./images/sq.png" />
                  <span>{{ item.titleValue3 }}</span>
                </div>
              </div>
              <div class="box4">
                <h5>
                  <span>{{ item.spanTile4 }}</span>
                </h5>
                <div class="pic">
                  <img src="./images/tb.png" />
                  <span>{{ item.titleValue4 }}</span>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <ul>
        <li v-for="(item, index) in dataAll" :key="index"  @click="$event=>clickHandler(item.name)" style="cursor: pointer;">
          <div class="li-content">
            <p>
              <span>{{ item.name }}</span>
            </p>
            <p><span>226933</span></p>
            <div class="li-box">
              <div class="box1">
                <h5>
                  <span>{{ item.spanTile1 }}</span>
                </h5>
                <div class="pic">
                  <img src="./images/wc.png" />
                  <span>{{ item.titleValue1 }}</span>
                </div>
              </div>
              <div class="box2">
                <h5>
                  <span>{{ item.spanTile2 }}</span>
                </h5>
                <div class="pic">
                  <img src="./images/zc.png" />
                  <span>{{ item.titleValue2 }}</span>
                </div>
              </div>
              <div class="box3">
                <h5>
                  <span>{{ item.spanTile3 }}</span>
                </h5>
                <div class="pic">
                  <img src="./images/sq.png" />
                  <span>{{ item.titleValue3 }}</span>
                </div>
              </div>
              <div class="box4">
                <h5>
                  <span>{{ item.spanTile4 }}</span>
                </h5>
                <div class="pic">
                  <img src="./images/tb.png" />
                  <span>{{ item.titleValue4 }}</span>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "fotterPage",
  data() {
    return {
      dataAll: [
        {
          name: "车辆监控",
          liang: 2269343,
          spanTile1: "桥车",
          titleValue1: 80.6,
          spanTile2: "客运车",
          titleValue2: 5.6,
          spanTile3: "卡车",
          titleValue3: 2.3,
          spanTile4: "运输车",
          titleValue4: 11.5,
        },
        {
          name: "服销售",
          liang: 2269343,
          spanTile1: "完成率",
          titleValue1: 54.6,
          spanTile2: "折扣率",
          titleValue2: 74.6,
          spanTile3: "售磬率",
          titleValue3: 25.3,
          spanTile4: "同比",
          titleValue4: 55.4,
        },
        {
          name: "配销售",
          liang: 2269343,
          spanTile1: "完成率",
          titleValue1: 54.6,
          spanTile2: "折扣率",
          titleValue2: 74.6,
          spanTile3: "售磬率",
          titleValue3: 25.3,
          spanTile4: "同比",
          titleValue4: 55.4,
        },
      ],
    };
  },
  methods:{
    clickHandler(name){
        if(name == '车辆监控'){
            this.$router.push('/vehicleMonitoring')
            return
        }
    }
  }
};
</script>

<style scoped lang="less">
@font-face {
  font-family: "液晶数字字体";
  src: url("./fonts/液晶数字字体.TTF");
}
// 底部模块
.fotterPage {
  width: 100%;
  height: 30%;
  position: relative;
  overflow: hidden;
  .ul-box {
    width: 200%;
    height: 100%;
    position: relative;
    animation: move 10s linear infinite 12s;
    ul {
      float: left;
      width: 50%;
      height: 100%;
      li {
        width: 30%;
        height: 100%;
        margin: 0 1.5%;
        background: url(./images/di.png) no-repeat center bottom;
        background-size: 50%;
        float: left;
        .li-content {
          opacity: 0;
          position: relative;
          width: 100%;
          height: 60%;
          background: url(./images/bg.png) no-repeat center;
          background-size: contain;
          overflow: hidden;
          animation: show5 1s linear forwards 8.5s;
          p {
            width: 100%;
            height: 20%;
            text-align: center;
            color: #fff;
            display: table;
            span {
              display: table-cell;
              vertical-align: middle;
            }
          }
          p:nth-of-type(1) {
            margin-top: 10%;
          }
          p:nth-of-type(2) {
            font-family: "液晶数字字体";
            font-size: 24px;
          }
          .li-box {
            position: absolute;
            width: 70%;
            height: 80%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            .box1,
            .box2,
            .box3,
            .box4 {
              width: 23%;
              height: 50%;
              position: absolute;
              h5 {
                height: 50%;
                color: #fff;
                font-size: 12px;
                font-weight: normal;
                display: table;
                span {
                  display: table-cell;
                  vertical-align: middle;
                }
              }
              .pic {
                width: 100%;
                height: 50%;
                color: #fff;
                font-size: 12px;
                img {
                  width: 16px;
                  vertical-align: bottom;
                  margin-right: 5%;
                }
              }
            }
            .box1 {
              left: 30px;
              top: 2px;
            }
            .box2 {
              right: 0px;
              top: 0;
            }
            .box3 {
              left: 30px;
              bottom: 2px;
            }
            .box4 {
              right: 0;
              bottom: 0;
            }
          }
        }
      }
      li:nth-of-type(1) {
        transform: translateY(100%);
        animation: di2 1s linear forwards 7s;
      }
      li:nth-of-type(2) {
        transform: translateY(100%);
        animation: di2 1s linear forwards 7s;
      }
      li:nth-of-type(3) {
        transform: translateY(100%);
        animation: di2 1s linear forwards 7s;
      }
    }
  }
}

// 底部动画
@keyframes di2 {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

// 投射动画
@keyframes show5 {
  0% {
    opacity: 0;
    transform: translateY(100%) scale(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>
